<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="./lib/vue-2.4.0.js"></script>
  </head>

  <body>
    <!-- 父组件控制区域 -->
    <div id="app">
      <!-- 父组件控制区域内部通过标签形式引用子组件  -->
      <!-- 父组件，可以在引用子组件的时候， 给子组件 通过 属性绑定（v-bind:自定义属性名） 的形式, 
            把 父组件data中数据 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
      <com1 v-bind:parentmsg="msg"></com1>
    </div>

    <script type="text/javascript">
      // 创建 Vue实例，得到 ViewModel
      var vm = new Vue({
        // vm 实例就是一个大组件 也有自己的控制区域 有自己的 data
        el: "#app",
        // 保存父组件控制区数据
        data: {
          msg: "123 啊-父组件中的数据"
        },
        methods: {},
        filter: {},
        directives: {},
        components: {},

        components: {
          // 子组件相关(私有组件)
          // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
          com1: {
            // 属于vm实例的子组件
            template:
              '<h1 @click="change">这是子组件 ---- {{ parentmsg }}</h1>',

            data() {
              // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，
              // 比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
              // data 上的数据，都是可读可写的；
              return {
                title: 123,
                name: "abc"
              };
            },
            // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
            // props 中的数据，都是只读的，无法重新赋值
            props: ["parentmsg"], // 把父组件传递过来的 parentmsg 属性，先在 props唯一的数组中，定义一下，这样，才能使用这个数据
            directives: {},
            filters: {},
            components: {},
            methods: {
              change() {
                // this.parentmsg = '被修改了';
              }
            }
          }
        }
      });
    </script>
  </body>
</html>
